<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		
		.big-vi{
			width: 560px;
			height: 300px;
			margin: 100px auto;
			border: 1px solid #000;
			position: relative;
			perspective:600px;
		}
		.big-vi ul{
			list-style: none;
		}
		.big-vi ul li{
			position: absolute;
			transition:all 1s ease 0s;
			top: 0;
			left: 0;
		}
		.big-vi ul li img{
			/*让图片跟着自己的盒子变大、变小*/
			width: 100%;
		}
		.big-vi ul li.stateA{
			z-index: 777;
			opacity: 0;
			transform: rotateY(40deg) translateX(-200px) translateZ(-200px) scale(0.2);
		}
		.big-vi ul li.stateB{
			z-index: 888;
			transform: rotateY(40deg) translateX(-200px) translateZ(-200px) scale(0.7);
		}
		.big-vi ul li.stateC{
			width: 560px;
			z-index: 999;
			transform:none;
		}
		.big-vi ul li.stateD{
			z-index: 888;
			transform:rotateY(-40deg) translateX(-60px);
			transform: rotateY(-40deg) translateX(200px) translateZ(-200px) scale(0.7);
		}
		.big-vi ul li.stateE{
			width: 80px;
			z-index: 777;
			opacity: 0;
			transform: rotateY(-40deg) translateX(200px) translateZ(-200px) scale(0.2);
		}
		.big-vi ul li.waiting{
			display: none;
		}
		.big-vi .rightBtn{
			float: right;
			position: relative;
			z-index: 113213;
			left:0;
			top:135px;
			width: 50px;
			height: 30px;
			border-radius: 10px;
			border:none;
			background: rgba(245, 234, 17, 0.84);
			cursor: pointer;
		}
		.big-vi .leftBtn{
			float: left;
			position: relative;
			z-index: 113213;
			right:0;
			top: 135px;
			width: 50px;
			height: 30px;
			border-radius: 10px;
			border:none;
			background: rgba(245, 234, 17, 0.84);
			cursor: pointer;
		}
		
		.big-vi .closed{ width: 50px; height: 30px; background: rgba(0,0,0,0.5); position:absolute; top:-40px; right: 0px; color: white; border-radius: 15px; line-height:30px; text-align: center;  cursor: pointer;}
	</style>

	<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
	<script type="text/javascript">
	
		window.onload = function(){
	
			// 得到按钮
			var rightBtn = document.getElementById("rightBtn");
			var leftBtn = document.getElementById("leftBtn");
			// 得到所有的li
			var myLis = document.getElementById("liebiao").getElementsByTagName("li");
			// 定义一个数组
			var arr = ["stateA","stateB","stateC","stateD","stateE","waiting","waiting"];

			//右按钮监听
			rightBtn.onclick = function(){
				// 删除数组的最后一项
				var lastOne = arr.pop();
				// 添加到最前面
				arr.unshift(lastOne);
				// 让第x个li的类名，变为数组中的第x项：
				for(var i = 0 ; i < myLis.length ; i++){
					myLis[i].className = arr[i];
				}
			}

			//右按钮监听
			leftBtn.onclick = function(){
				// 删除数组的第一项
				var firstOne = arr.shift();
				// 添加到最后面
				arr.push(firstOne);
				// 让第x个li的类名，变为数组中的第x项：
				for(var i = 0 ; i < myLis.length ; i++){
					myLis[i].className = arr[i];
				}
			}
			
			$('.closed').click(function(){
				$('.big-vi').hide(500);
			})
		}
	</script>
</head>
<body>
	<div class="big-vi">
		<input id="leftBtn" class="leftBtn" type="button" value="上一张">
		<input id="rightBtn" class="rightBtn" type="button" value="下一张">
		<ul id="liebiao">
			<li class="stateA"><img src="img/VI-1.jpg" alt=""></li>
			<li class="stateB"><img src="img/VI-2.jpg" alt=""></li>
			<li class="stateC"><img src="img/VI-3.jpg" alt=""></li>
			<li class="stateD"><img src="img/VI-4.jpg" alt=""></li>
			<li class="stateE"><img src="img/VI-5.jpg" alt=""></li>
			<li class="waiting"><img src="img/VI-6.jpg" alt=""></li>
			<li class="waiting"><img src="img/VI-7.jpg" alt=""></li>
		</ul>
		<div class="closed">关闭</div>
	</div>
</body>
</html>